<template>
  <el-drawer
      v-model="drawer"
      :title="title"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      @close="handleClose"
  >
    <template #default>
      <div class="default" >
        <slot></slot>
      </div>
    </template>
    <template #footer v-if="footer">
      <el-button type="primary" @click="handleClick">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts">
export default {
  name: "Drawer"
}
</script>

<script setup lang="ts">
import {computed, onMounted} from "vue"

const emit = defineEmits<{
  (e: 'update:value', val: boolean): void
  (e: "ok"): void
  (e: "close"): void
}>()

// noinspection TypeScriptValidateTypes
const props = withDefaults(defineProps<{
  value: boolean
  title: string
  closeOnClickModal: boolean
  closeOnPressEscape: boolean
  footer: boolean
}>(), {
  value: false,
  title: "",
  closeOnClickModal: false,
  closeOnPressEscape: false,
  footer: true
})

const drawer = computed({
  get() {
    return props.value
  },
  set(val: boolean) {
    emit('update:value', val)
  }
})

const handleClick = () => {
  emit("ok")
}

const handleClose = () => {
  emit("close")
}

onMounted( () => {
} )
</script>

<style scoped lang="scss">
.default{
  height: 100%;
}
</style>
